<template>
  <div class="newpassage">
    <div class="newpassage-p">
      <h2>{{ typeId != -1 ? typeName : "文章列表" }}</h2>
    </div>
    <div class="new-email" v-if="articleList.length != 0">
      <ul>
        <li v-for="item in articleList" :key="item.articleId">
          <router-link
            :to="{
              path: '/articleDetail',
              query: { articleId: item.articleId },
            }"
            :key="item.articleId"
          >
            <div class="email-left">
              <div class="email-right">
                <img :src="item.firstPicture" />
              </div>
              <div class="email-more">
                <h4>{{ item.articleTitle }}</h4>
                <p>
                  {{ item.articleSummary }}
                </p>
                <div class="artcle-icons">
                  <span
                    ><i class="iconfont">&#xe601;</i
                    >{{ item.articleAuthor }}</span
                  >
                  <span
                    ><i class="iconfont">&#xe64d;</i
                    >{{ item.createTime | formatDate }}</span
                  >
                  <span
                    ><i class="iconfont">&#xe670;</i
                    >{{ item.articleViews }}</span
                  >
                  <span
                    ><i class="iconfont">&#xe7f5;</i
                    >{{ item.recommendGrade }}</span
                  >
                </div>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <div v-else>
      <p
        style="
          text-align: center;
          color: #717171;
          margin-top: 5%;
          font-family: STXingkai;
          font-size: 25px;
        "
      >
        暂无分类详情，下次再来哦！
      </p>
    </div>
    <div class="pageover">
      <el-pagination
        background
        align="center"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="articleList.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import "@/assets/css/typeList.css";
import { selectArticleList, getArticleListByKeyword } from "@/api/index";
import { getTypeArticleList } from "@/api/typeList";
import { formatDate } from "@/utils/date";
export default {
  data() {
    return {
      articleList: [],
      currentPage: 1,
      pageSize: 10,
    };
  },
  props: ["typeId", "typeName", "keyword"], //使用字符串数组的形式!!

  created() {
    this.getArticleListFun();
  },
  // 创建一个过滤器
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  methods: {
    getArticleListFun() {
      if (this.typeId > -1) {
        const params = {
          typeId: this.typeId,
        };
        getTypeArticleList(params).then((response) => {
          this.articleList = response.data;
        });
      } else if (this.typeId == -1) {
        selectArticleList().then((response) => {
          this.articleList = response.data;
        });
      } else if (this.typeId == -2) {
        // 模糊查询
        getArticleListByKeyword().then((resp) => {
          this.articleList = resp.data;
        });
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

<style></style>
